<template>
  <div>
    <!-- 头部 --state-->
    <div class="nav">
      <p>
        <span>.</span>
        客户详情
      </p>
      <div id="nav_go4">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
          >返回</el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->

    <div class="bigbox">
      <!-- 基本信息 -->
      <div class="customerxq_box1">
        <p>基本信息</p>
        <ul>
          <li>
            <span>企业编号</span>
            <el-input
              style="width: 55%"
              v-model="componyno"
              readonly
            ></el-input>
          </li>
          <li>
            <span>企业名称</span>
            <el-input
              style="width: 55%"
              v-model="componyname"
              readonly
            ></el-input>
          </li>
          <li>
            <span>企业地址</span>
            <el-input style="width: 55%" v-model="address" readonly></el-input>
          </li>
          <li>
            <span>合作年限</span>
            <el-input
              style="width: 55%"
              v-model="collaboratetime"
              readonly
            ></el-input>
          </li>
          <li>
            <span>合作状态</span>
            <el-input style="width: 55%" v-model="state" readonly></el-input>
          </li>
          <li>
            <span>信用额度</span>
            <el-input
              style="width: 55%"
              v-model="creditlines"
              readonly
            ></el-input>
          </li>
          <li>
            <span>到期欠款(元)</span>
            <el-input
              style="width: 55%"
              v-model="expriedebt"
              readonly
            ></el-input>
          </li>
          <li>
            <span>未到期欠款(元)</span>
            <el-input
              style="width: 55%"
              v-model="unexpriedebt"
              readonly
            ></el-input>
          </li>
          <li>
            <span>欠款总额(元)</span>
            <el-input
              style="width: 55%"
              v-model="totalpriedebt"
              readonly
            ></el-input>
          </li>
          <li>
            <span>订单总额(元)</span>
            <el-input
              style="width: 55%"
              v-model="totalpriedebt"
              readonly
            ></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input style="width: 55%" v-model="linkman" readonly></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              style="width: 55%"
              v-model="linkphone"
              readonly
            ></el-input>
          </li>
          <li>
            <span>职务</span>
            <el-input style="width: 55%" v-model="duty" readonly></el-input>
          </li>
        </ul>
      </div>
      <div class="customerxq_box2">
        <!-- 开票消息 -->
        <div class="box2_left_top">
          <p>开票信息</p>
          <ul>
            <li>
              <span>单位名称</span>
              <el-input
                style="width: 70%"
                v-model="compname"
                readonly
              ></el-input>
            </li>
            <li>
              <span>联系人</span>
              <el-input style="width: 70%" v-model="people" readonly></el-input>
            </li>
            <li>
              <span>单位地址</span>
              <el-input
                style="width: 70%"
                v-model="compaddress"
                readonly
              ></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%" v-model="phone" readonly></el-input>
            </li>
            <li>
              <span>开户行</span>
              <el-input
                style="width: 70%"
                v-model="openbank"
                readonly
              ></el-input>
            </li>
            <li>
              <span>开户账号</span>
              <el-input
                style="width: 70%"
                v-model="openaccount"
                readonly
              ></el-input>
            </li>
            <li class="li">
              <span>纳税人识别号</span>
              <el-input
                style="width: 80%"
                v-model="taxpyer"
                readonly
              ></el-input>
            </li>
          </ul>
        </div>
        <!-- 其他消息 -->
        <div class="box2_left_bottom">
          <div class="box2_header">
            <span>其他信息</span>
            <el-button type="primary" size="small" @click="opermess(true, '')"
              >新增消息</el-button
            >
          </div>

          <el-table
            :data="messlist"
            :height="250"
            :max-height="180"
            stripe
            style="width: 98%; background-color: #fff; margin-left: 10px"
          >
            <el-table-column label="信息类型" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="信息内容" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="opermess(false, scope.$index)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="bottom">
        <el-button type="primary" size="medium" @click="revert()"
          >确定</el-button
        >
        <el-button type="info" size="medium" @click="revert()">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      messlist: [{ key: "", value: "" }], //qita其他信息
      tableData: [],
      state1: "",
      state2: "",
      active: 1,
      qitavalue: [],
      componyno: "",
      componyname: "",
      address: "",
      collaboratetime: "",
      state: "",
      creditlines: "",
      expriedebt: "",
      unexpriedebt: "",
      totalpriedebt: "",
      linkman: "",
      linkphone: "",
      duty: "",

      compname: "",
      compaddress: "",
      people: "",
      phone: "",
      openbank: "",
      openaccount: "",
      taxpyer: "",
      customerno: "",
    };
  },
  created() {
    this.customerno = this.$route.query.componyno;
    this.getval();
  },
  methods: {
    // 新增消息
    opermess(mark, index) {
      if (mark == true) {
        this.messlist.push({ key: "", value: "" });
      } else {
        this.messlist.splice(index, 1);
      }
    },
    //详情数据
    getval() {
      let arr = { customerno: this.customerno };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/Customermanlst?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        this.componyno = data3.componyno;
        this.componyname = data3.componyname;
        this.address = data3.address;
        this.state = data3.state;
        this.creditlines = data3.creditlines;
        this.expriedebt = data3.expriedebt;
        this.unexpriedebt = data3.unexpriedebt;
        this.totalpriedebt = data3.totalpriedebt;
        this.linkman = data3.linkman;
        this.linkphone = data3.linkphone;
        this.duty = data3.duty;
        var val = [];
        data3.lstcr.forEach((element) => {
          val.push(element);
        });
        this.tableData = val;
        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(parseInt(this.tableData[i].createon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].createon = y + "-" + m + "-" + d + " ";
        }
        var val1 = [];
        data3.lsom.forEach((element) => {
          val1.push(element);
        });
        this.qitavalue = val1;

        var val2 = [];
        data3.lstkp.forEach((element) => {
          val2.push(element);
        });
        this.compname = val2[0].compname;
        this.compaddress = val2[0].compaddress;
        this.openbank = val2[0].openbank;
        this.people = val2[0].people;
        this.phone = val2[0].phone;
        this.taxpyer = val2[0].taxpyer;
        this.openaccount = val2[0].openaccount;
      });
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.bigbox {
  width: 98%;
  margin-left: 20px;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go4 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.customerxq_box1 {
  background: $white;
  height: 220px;
  width: 98%;
  padding: 0 1%;
  font-size: 14px;
  p {
    font-weight: bold;
    height: 40px;
    padding-top: 10px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      margin-top: 10px;
      text-align: right;
    }
  }
}
.customerxq_box2 {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: $fontcolor;
  p {
    font-weight: bold;
    height: 40px;
    padding-top: 10px;
    padding-left: 1%;
  }

  .box2_left_top {
    background: $white;
    height: 280px;
    padding-left: 1%;
    width: 49%;
    //   border: solid 1px red;
    ul {
      width: 98%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 1%;
      li {
        width: 50%;
        margin-top: 10px;
        text-align: right;
      }
      .li {
        width: 100%;
      }
    }
  }

  .box2_left_bottom {
    background: $white;
    // margin-top: 10px;
    padding-left: 1%;
    height: 280px;
    width: 48%;
    .box2_header {
      padding-top: 10px;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .el-button {
        margin-right: 10px;
      }
    }
  }
}
.bottom {
  padding-top: 20px;
  text-align: center;
}
</style>
